<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <script src="../jquery2.1.1.min.js" type="text/javascript"></script>-->

    <style type="text/css">

        input,select{
            width: 200px;
        }
        #select1{
            display: none;
            width: 200px;
        }
    </style>
</head>
<body>

<!--妙啊  实现下拉选选择 -->

<input id="input1" type="text" name=""> <br />
<select id="select1" style="position: absolute;z-index:9999">
    <option>A</option>

    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>A1</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
</select>

<script type="text/javascript">
    let input1 = document.getElementById('input1');
    console.log(input1)

    let select1 = document.getElementById('select1');
    input1.onclick = function(e){
        select1.style.display = 'block';
    }
    select1.size = 4;


    //点击 option 触发事件

    opi=document.getElementById('select1')

    opi.options[opi.selectedIndex].onclick = function (){
        input1.value = this.innerHTML;
        select1.style.display = 'none';
    }


    //下拉选 选择后会触发
    select1.onchange = function(e){
        var option = this.options[this.selectedIndex];
        //把选择的内容传给 input输入框
        input1.value = option.innerHTML;
        select1.style.display = 'none';
    }

    input1.onkeyup=function (e){

        let showText=input1.value;
        console.log(input1.value)
        let opi=document.getElementsByTagName('option')

        for (const opiElement of opi) {
            console.log(opiElement.innerText)
            if(opiElement.innerText.indexOf(showText)!==-1){
                console.log('包含')
                opiElement.style.display = "block"
            }else{
                opiElement.style.display = "none"
            }

        }
        console.log(opi)
    }



    //鼠标离开 下拉选  下拉选自动隐藏

    document.getElementById('select1').onmouseleave  = function (e){


        document.getElementById('select1').style.display = 'none'

    }


    //鼠标进入  输入框 下拉选自动出现
    document.getElementById('input1').onmouseenter  = function (e){


        document.getElementById('select1').style.display = 'block'

    }
</script>

</body>
</html>